<template>
    <!-- 设置支付密码 -->
    <div class="setpaypaw">
        <!--首次输入-->
        <div v-if="!affirmpaw">
            <p class="textp" v-if="money != 'forget'">首次使用该功能请设置支付密码</p>
            <p class="textp" v-if="money == 'forget'">请设置新的支付密码</p>
            <div class="setpaw-box">
                <div class="paw-item">
                    <span>{{ this.pawStr1[0] | getpaw }}</span>            
                    <span>{{ this.pawStr1[1] | getpaw}}</span>            
                    <span>{{ this.pawStr1[2] | getpaw}}</span>            
                    <span>{{ this.pawStr1[3] | getpaw}}</span>            
                    <span>{{ this.pawStr1[4] | getpaw}}</span>            
                    <span style="border-right: none;">{{ this.pawStr1[5] | getpaw }}</span>            
                </div>
            </div>
            <div class="checki-btn setpaypaw-btn btne" v-if="pawStr1.length < 6">下一步</div>
            <div class="checki-btn setpaypaw-btn"  v-if="pawStr1.length == 6" @click="toaffirmpaw">下一步</div>
            <!--键盘-->
            <div class="keyboard">
                <div class="key-box">
                    <span class="spana" @click="getpaw(1,1)">1</span>
                    <span class="spana" @click="getpaw(2,1)">2</span>
                    <span @click="getpaw(3,1)" class="spana borderrn">3</span>
                </div>
                <div class="key-box">
                    <span class="spana" @click="getpaw(4,1)">4</span>
                    <span class="spana" @click="getpaw(5,1)">5</span>
                    <span @click="getpaw(6,1)" class="spana borderrn">6</span>
                </div>
                <div class="key-box">
                    <span class="spana" @click="getpaw(7,1)">7</span>
                    <span class="spana" @click="getpaw(8,1)">8</span>
                    <span @click="getpaw(9,1)" class="spana borderrn">9</span>
                </div>
                <div class="key-box">
                    <span class="over colore" style="font-size: .32rem;"></span>
                    <span class="spana" @click="getpaw(0,1)">0</span>
                    <span class="back colore spana" @click="cancelpaw(1)">×</span>
                </div>
            </div>
        </div>
        <!--再次输入-->
        <div v-if="affirmpaw">
            <p class="textp">请确认支付密码</p>
            <div class="setpaw-box">
                <div class="paw-item">
                    <span>{{ this.pawStr2[0] | getpaw }}</span>            
                    <span>{{ this.pawStr2[1] | getpaw}}</span>            
                    <span>{{ this.pawStr2[2] | getpaw}}</span>            
                    <span>{{ this.pawStr2[3] | getpaw}}</span>            
                    <span>{{ this.pawStr2[4] | getpaw}}</span>            
                    <span style="border-right: none;">{{ this.pawStr2[5] | getpaw }}</span>            
                </div>
            </div>
            <div class="checki-btn setpaypaw-btn btne" v-if="pawStr2.length < 6">提交</div>
            <div class="checki-btn setpaypaw-btn"  v-if="pawStr2.length == 6" @click="submit" v-text="textB"></div>
            <!--键盘-->
            <div class="keyboard">
                <div class="key-box">
                    <span class="spana" @click="getpaw(1,2)">1</span>
                    <span class="spana" @click="getpaw(2,2)">2</span>
                    <span @click="getpaw(3,2)" class="spana borderrn">3</span>
                </div>
                <div class="key-box">
                    <span class="spana" @click="getpaw(4,2)">4</span>
                    <span class="spana" @click="getpaw(5,2)">5</span>
                    <span @click="getpaw(6,2)" class="spana borderrn">6</span>
                </div>
                <div class="key-box">
                    <span class="spana" @click="getpaw(7,2)">7</span>
                    <span class="spana" @click="getpaw(8,2)">8</span>
                    <span @click="getpaw(9,2)" class="spana borderrn">9</span>
                </div>
                <div class="key-box">
                    <span class="over colore" style="font-size: .32rem;"></span>
                    <span class="spana" @click="getpaw(0,2)">0</span>
                    <span class="back colore spana" @click="cancelpaw(2)">×</span>
                </div>
            </div>
        </div>        
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default{
        data:function(){
            return{
                mobile:'',
                password1:'',
                password2:'',
                pawStr1:[],
                pawStr2:[],
                affirmpaw:false,
                money:'',
                currency:'',
                type:'',
                textB:'提交'
            }
        },
        mounted:function(){
            this.textB = '提交';
            this.money = this.$route.query.money;
            this.currency = this.$route.query.currency;
            this.type = this.$route.query.type;
            this.password1= "";
            this.password2= "";
            this.pawStr1 = [];
            this.pawStr2 = [];
            this.affirmpaw = false;
        },
        methods:{
            //转换钻石
            exchange(){
                this.post({
                    url:"api/currency/exchang",
                    data:{
                        exchang_currency:this.currency,
                        currency:'diamonds',
                        currency_number:this.money,
                        currency_str:this.currency+'_to_diamonds'
                    }
                }).then(res=>{
                    //刷新魅力值
                    this.confirm("兑换成功");
                    this.$router.push('/account');
                }).catch(res=>{
                    this.$router.push('/account');
                })
            },            
            //提现
            withdrawals(){
                this.post({
                    url:"api/user/withdrawals",
                    data:{
                        charm_money_num:this.money,
                        currency:this.currency
                    }
                }).then(res=>{
                    //提现成功后返回账户页
                    //this.$router.push({path:"/forward",query:{'current':this.currency == 'charm'?'0':'1','type':this.type}});
                    this.$router.push('/account');
                    this.confirm("提现成功");
                }).catch(res=>{
                    this.$router.push('/account');
                })
            },
            //确认密码
            toaffirmpaw(){
                if(this.pawStr1.length == 6){
                    this.affirmpaw = true;
                }
            },
            //提交设置密码
            submit(){
                if(this.password1 == this.password2){
                    if(this.textB != '请求中...'){
                        this.textB = '请求中...'
                        this.post({
                            url:"api/pay/password/set",
                            data:{
                                password:this.password1
                            }
                        }).then(res=>{
                            this.textB = '提交';
                            //如果是修改密码，就返回提现页，如果是第一次就直接提现
                            
                            if(this.money == 'forget'){
                                this.$router.push({path:"/forward",query:{'current':this.currency == 'charm'?'0':'1','type':this.type}});
                            }else{
                                if(this.type == 1){
                                    this.exchange();
                                }
                                if(this.type == 2){
                                    this.withdrawals();
                                }
                            }
                        }).catch(res=>{
                            this.textB = '提交';
                        })
                    }else{
                        return
                    }
                }else{
                    Toast({
                        message: '两次输入的密码不一致',
                        duration: 2000,
                        position: 'bottom',
                        //iconClass: 'icon icon-success'
                    });   
                }
            },
            //点击获取密码值1
            getpaw(num,type){
                if(this.password1.length < 6 && type == 1){                
                    this.password1 += num.toString();  //第一次密码
                }else if(this.password2.length < 6 && type == 2){
                    this.password2 += num.toString();   //确认密码
                }else{
                    return
                }
                this.getpawnum(type);
            },
            //后退取消密码
            cancelpaw(type){

                var len1 = this.password1.length - 1;
                var len2 = this.password2.length - 1;

                if(this.password1.length != 0 && type == 1){
                    this.password1 = this.password1.substring(0,len1);
                }
                //确认密码
                if(this.password2.length != 0 && type == 2){
                    this.password2 = this.password2.substring(0,len2);
                }
                this.getpawnum(type);
            },
            //密码框获取密码
            getpawnum(type){
                if(type == 1){
                    this.pawStr1 = this.password1.split('');
                }
                //确认密码
                if(type == 2){
                    this.pawStr2 = this.password2.split('');
                }
            }
        },
        filters:{
            getpaw:function(num){
                if(num){
                    return '*'
                }
            }
        }
    }
</script>
<style type="text/css">
    @import url('./account.css');
</style>